<template>
    <div class="taskOrderDetail-wrapper">
        <IHeader class="header" back="true" title="任务详情"></IHeader>
        <scroller class="publicDetail-scroller" v-if="!loadingShow">
            <div class="flex_row just_between" style="padding-top: 36px;">
                <div class="personal flex_row">
                    <image class="avatar" :src="detailObj.headPortraitUrl ? detailObj.headPortraitUrl : imgPath('default_avatar.png')"></image>
                    <div>
                        <text class="name fs_28 col_464646">{{detailObj.nickname ? detailObj.nickname : '无昵称'}}</text>
                        <div class="flex_row align_center margin_top_16">
                            <image class="view margin_right_16" :src="imgPath('follow.png')"></image>
                            <text class="views col_cecece fs_24 margin_right_16">224</text>
                            <text class="public-date col_cecece fs_24">发布：{{detailObj.createTime}}</text>
                        </div>
                    </div>
                </div>
                <div class="status-wrapper">
                    <text class="status text_right fs_28" :class="[(detailObj.taskStatus === '1' || detailObj.taskStatus === '6') ? 'col_ff0f37' : 'col_64c56b']">{{statusList[Number(detailObj.taskStatus) - 1]}}</text>
                    <text class="time text_right margin_top_16 fs_24 col_ff0f37" v-if="detailObj.taskValidity && detailObj.taskStatus === '1'">{{filterTime(detailObj.taskValidity)}}</text>
                </div>
            </div>
            <div class="detail-wrapper flex_row just_between">
                <image class="type-icon" :src="imgPath(iconList[Number(serviceType) - 1])"></image>
                <div class="detail">
                    <div class="flex_row just_between">
                        <text class="title col_464646">{{type === 0 ? detailObj.title : '订单编号：' + askObject.orderNo}}</text>
                        <text class="cost" v-if="type === 1">{{askObject.cost ? '￥ ' + askObject.cost : '费用'}}</text>
                    </div>
                    <div class="detail-number flex_row just_between" v-if="type === 0">
                        <text class="fs_24 col_868686" v-if="askObject.number">数量：{{askObject.number}}{{askObject.numberUnit}}</text>
                        <text class="fs_24 col_868686" v-if="serviceType === '9'">数量：{{askObject.lookingNumber}}{{askObject.lookingUnit}}</text>
                        <text class="fs_24 col_868686" v-if="serviceType === '10'">订单数量：{{askObject.orderNumber}}</text>
                        <text class="fs_24 col_868686" v-if="serviceType === '11'">工厂地区：{{askObject.province}}{{askObject.city}}{{askObject.district}}</text>
                        <!--<text class="fs_24 col_868686" v-if="askObject.taskName">任务名称：{{askObject.taskName}}</text>-->
                        <text class="fs_24 col_868686" v-if="askObject.lookingType">求购类型：{{askObject.lookingType}}-{{askObject.subType}}</text>
                        <text class="fs_24 col_cecece">来源：{{handleFilterType(serviceType)}}</text>
                    </div>
                    <div class="detail-number flex_row just_between" v-if="type === 1">
                        <div class="flex_row">
                            <text class="fs_24 col_868686" v-if="askObject.number">数量：{{askObject.number}}{{askObject.numberUnit}}</text>
                            <text class="fs_24 col_cecece" style="margin-left: 12px;">来源：{{handleFilterType(serviceType)}}</text>
                        </div>
                        <text class="price" v-if="!askObject.cost">泳衣库核价中</text>
                        <text class="chat" v-if="askObject.cost">已通过</text>
                    </div>
                </div>
            </div>
            <div class="infomation-wrapper">
                <text class="tit">{{type === 0 ? '需求信息' : '发布信息'}}</text>
                <div class="table margin_top_16">
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="serviceType === '8'">
                        <text class="table-tit fs_28 col_868686">布料类型</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.type}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="serviceType === '8'">
                        <text class="table-tit fs_28 col_868686">材质</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.material}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="serviceType === '8'">
                        <text class="table-tit fs_28 col_868686">成分</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.ingredient}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="serviceType === '8'">
                        <text class="table-tit fs_28 col_868686">克重</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.g}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="serviceType === '8'">
                        <text class="table-tit fs_28 col_868686">工艺</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.technology}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="serviceType === '9'">
                        <text class="table-tit fs_28 col_868686">辅料名称</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.name}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="serviceType === '9'">
                        <text class="table-tit fs_28 col_868686">产品类型</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.type}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="serviceType === '10' || serviceType === '11'">
                        <text class="table-tit fs_28 col_868686">标题</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.title}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="serviceType === '10'">
                        <text class="table-tit fs_28 col_868686">产品类型</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.produceType}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="askObject.exportingCountries">
                        <text class="table-tit fs_28 col_868686">出口国家</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.exportingCountries}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="askObject.color">
                        <text class="table-tit fs_28 col_868686">配色</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.color}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="askObject.codeSegment">
                        <text class="table-tit fs_28 col_868686">码段</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.codeSegment}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="askObject.detailedAddress">
                        <text class="table-tit fs_28 col_868686">详细地区</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.detailedAddress}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="askObject.mainProducts">
                        <text class="table-tit fs_28 col_868686">主营产品</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.mainProducts}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="askObject.serviceType">
                        <text class="table-tit fs_28 col_868686">服务类型</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.serviceType}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="askObject.type">
                        <text class="table-tit fs_28 col_868686">高人类型</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.type}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="askObject.clientArea">
                        <text class="table-tit fs_28 col_868686">客户地区</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.clientArea}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="askObject.style">
                        <text class="table-tit fs_28 col_868686">打版款式</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.style}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="askObject.designStyle">
                        <text class="table-tit fs_28 col_868686">设计款式</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.designStyle}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="askObject.addValueDemand">
                        <text class="table-tit fs_28 col_868686">增值需求</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.addValueDemand}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="askObject.versionNumber">
                        <text class="table-tit fs_28 col_868686">打版号码</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.versionNumber}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="askObject.budget">
                        <text class="table-tit fs_28 col_868686">预算</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.budget === '0' ? '面议' : askObject.budget}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="askObject.deliveryDate">
                        <text class="table-tit fs_28 col_868686">交货日期</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.deliveryDate.substring(0,10)}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb">
                        <text class="table-tit fs_28 col_868686">联系人</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.contact}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb">
                        <text class="table-tit fs_28 col_868686">联系电话</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.contactPhone}}</text>
                    </div>
                    <div class="table-item align_center flex_row border_top_ebebeb" v-if="askObject.contactAddress">
                        <text class="table-tit fs_28 col_868686">联系地址</text>
                        <text class="table-tit fs_24 col_464646 font_bold border_left_ebebeb">{{askObject.contactAddress}}</text>
                    </div>
                </div>
            </div>
            <div class="description-wrapper">
                <text class="tit">描述信息</text>
                <text class="description col_868686 margin_top_16">{{detailObj.descriptionInformation ? detailObj.descriptionInformation : detailObj.describtion}}</text>
            </div>
            <div class="image-wrapper">
                <text class="tit">图片信息</text>
                <div class="image-container margin_top_16 flex_row">
                    <image class="imgs" :class="[index !== imageUrl.length - 1 ? 'margin_right_12' : '']" :src="item" v-for="(item, index) in imageUrl" :key="index" @click="previewImage" resize="contain"></image>
                </div>
            </div>
            <div class="progress-wrapper" v-if="userId">
                <text class="tit">任务进程</text>
                <div class="progress flex_row">
                    <div class="progress-item" @click="handleContact">
                        <image class="item-icon" :src="imgPath('publish_phone.png')"></image>
                        <text class="item-name col_464646 fs_28 margin_top_16">点击沟通</text>
                    </div>
                </div>
            </div>
            <div class="bar" v-if="!userId"></div>
        </scroller>
        <div class="operation-wrapper flex_row" v-if="!userId">
            <div class="operation-item flex_row bgc_fff" @click="handleContact">
                <image class="operation-icon" :src="imgPath('lianxidianhua.png')"></image>
                <text class="operation-word">联系洽谈</text>
            </div>
            <div class="operation-item flex_row bgc_545c72" @click="receiveOreder">
                <image class="operation-icon" :src="imgPath('receive.png')"></image>
                <text class="operation-word col_fff">马上接单</text>
            </div>
        </div>
        <!--图片预览-->
        <wxc-lightbox ref="wxc-lightbox" width="750" height="750" :show="previewShow" :image-list="imageList" @wxcLightboxOverlayClicked="hidePreview"></wxc-lightbox>
        <!--loading-->
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import { WxcLoading, WxcLightbox } from 'weex-ui'
import { validatenull } from '@/util/validate'
import { queryDist } from '@/api/common'
import { changeTaskStatus } from '@/api/home'
import { getLookingDetail, getWorkshopDetail } from '@/api/market'
import Nat from 'natjs'
const modal = weex.requireModule('modal')

export default {
  name: 'taskOrderDetail',
  data () {
    return {
      loadingShow: true, // loading
      needMask: true,
      previewShow: false, // 图片预览显示
      imageList: [], // 图片预览地址
      statusList: ['未接单', '已接单', '任务中', '待收货', '已完成', '已过期', '任务超期'], // 状态列表
      iconList: ['designer.png', 'printer.png', '', '', '', '', 'sam_garm_worker.png', 'fabric_dealer.png', 'excipient_dealer.png', 'swimsuit_factory.png', 'find_order.png', 'master.png'], // icon列表
      id: {}, // 传参ID
      serviceType: '', // 服务类型
      type: 0, // 传参类型
      detailObj: {}, // 详情对象
      typeList: [], // 类型列表
      imageUrl: [], // 图片列表
      askObject: {} // 需求信息
    }
  },
  created () {
    const that = this
    that.id = that.$route.query.id
    that.type = that.$route.query.type
    that.serviceType = that.$route.query.serviceType
    that.userId = that.$route.query.userId
  },
  mounted () {
    const that = this
    let path = that.type === 0 ? getLookingDetail : getWorkshopDetail
    that.loadingShow = true
    that.$api.get(queryDist + 'service_type', {}, (result) => {
      that.typeList = result.data
      that.$api.get(path + that.id, {}, (res) => {
        that.detailObj = res.data
        let detail = {
          yykFabric: that.detailObj.yykFabric,
          yykAccessory: that.detailObj.yykAccessory,
          yykFactory: that.detailObj.yykFactory,
          orderDetailDTO: that.detailObj.orderDetailDTO,
          yykMaster: that.detailObj.yykMaster,
          yykPlayVersion: that.detailObj.yykPlayVersion,
          yykProofing: that.detailObj.yykProofing,
          yykDesign: that.detailObj.yykDesign
        }
        for (let i in detail) {
          if (!validatenull(detail[i])) {
            that.askObject = detail[i]
          }
        }
        that.imageUrl = that.type === 0 ? that.detailObj.imagesUrl.split(',') : that.detailObj.dataUpload.split(',')
        that.loadingShow = false
      }, () => {
        that.loadingShow = false
      })
    })
  },
  methods: {
    handleFilterType (type) { // 类型格式化
      const that = this
      let str = ''
      that.typeList.forEach((item) => {
        if (item.value === type) {
          str = item.description
        }
      })
      return str
    },
    handleContact () { // 拨打电话
      Nat.call(this.detailObj.contactPhone)
    },
    previewImage () { // 图片预览
      const that = this
      that.imageList = []
      let list = that.imageUrl
      list.forEach((item) => {
        let obj = {
          src: item
        }
        that.imageList.push(obj)
      })
      that.previewShow = true
    },
    hidePreview () { // 隐藏图片预览
      this.previewShow = false
    },
    receiveOreder () { // 接单
      const that = this
      let params = {
        id: that.detailObj.id,
        taskStatus: 2
      }
      that.$api.post(changeTaskStatus, params, () => {
        modal.toast({
          message: '接单成功'
        })
      }, () => {}, true)
    }
  },
  components: {
    IHeader,
    WxcLoading,
    WxcLightbox
  }
}
</script>

<style scoped>
    .flex_row {
        flex-direction: row;
    }
    .just_between  {
        justify-content: space-between;
    }
    .align_center {
        align-items: center;
    }
    .bgc_fff {
        background-color: #fff;
    }
    .col_fff {
        color: #fff;
    }
    .col_464646 {
        color: #464646;
    }
    .col_868686 {
        color: #868686;
    }
    .col_cecece {
        color: #cecece;
    }
    .col_64c56b {
        color: #64c56b;
    }
    .col_ff0f37 {
        color: #ff0f37;
    }
    .fs_24 {
        font-size: 24px;
    }
    .fs_28 {
        font-size: 28px;
    }
    .font_bold {
        font-weight: bold;
    }
    .text_right {
        text-align: right;
    }
    .margin_right_12 {
        margin-right: 12px;
    }
    .margin_right_16 {
        margin-right: 16px;
    }
    .margin_top_16 {
        margin-top: 16px;
    }
    .border_top_ebebeb {
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #ebebeb;
    }
    .border_left_ebebeb {
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: #ebebeb;
    }
    .publicDetail-scroller {
        margin-top: 88px;
        /*padding-top: 24px;*/
        /*margin-bottom: 72px;*/
        padding-left: 24px;
        padding-right: 24px;
    }
    .avatar {
        width: 80px;
        height: 80px;
        margin-right: 24px;
        border-radius: 40px;
    }
    .name {
        width: 350px;
        line-height: 36px;
        font-weight: bold;
    }
    .view {
        width: 30px;
        height: 30px;
    }
    .status {
        line-height: 36px;
        /*font-size: 28px;*/
    }
    .detail-wrapper {
        margin-top: 64px;
    }
    .type-icon {
        width: 78px;
        height: 78px;
        margin-right: 24px;
    }
    .detail {
        flex: 1;
    }
    .title {
        width: 600px;
        font-size: 32px;
        font-weight: bold;
    }
    .detail-number {
        margin-top: 8px;
    }
    .infomation-wrapper {
        margin-top: 32px;
    }
    .tit {
        padding-left: 16px;
        border-left-width: 4px;
        border-left-style: solid;
        border-left-color: #fecb01;
        font-size: 28px;
        line-height: 28px;
        color: #464646;
    }
    .table {
        border-width: 1px;
        border-style: solid;
        border-color: #ebebeb;
    }
    .table-tit {
        width: 348px;
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 9px;
        padding-right: 9px;
        /*flex: 1;*/
        /*height: 68px;*/
        line-height: 40px;
        text-align: center;
    }
    .description-wrapper {
        margin-top: 32px;
    }
    .description {
        flex: 1;
        /*width: 660px;*/
        padding-left: 20px;
        padding-right: 20px;
        line-height: 36px;
        font-size: 26px;
    }
    .image-wrapper {
        margin-top: 32px;
    }
    .imgs {
        width: 226px;
        height: 226px;
        border-radius: 10px;
    }
    .progress-wrapper {
        margin-top: 32px;
        padding-bottom: 48px;
    }
    .progress {
        margin-top: 32px;
        justify-content: space-around;
    }
    .progress-item {
        width: 120px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .item-icon {
        width: 98px;
        height: 98px;
    }
    .item-name {
        text-align: center;
    }
    .item-status {
        margin-top: 8px;
        text-align: center;
        color: rgb(100, 197, 107);
    }
    .operation-wrapper {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 99px;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #545c72;
    }
    .operation-item {
        flex: 1;
        flex-wrap: wrap;
        justify-content: center;
    }
    .operation-icon {
        width: 42px;
        height: 42px;
        margin-top: 8px;
        margin-bottom: 8px;
    }
    .operation-word {
        width: 350px;
        font-size: 24px;
        text-align: center;
    }
    .bgc_545c72 {
        color: #fff;
        background-color: #545c72;
    }
    .bar {
        height: 160px;
    }
    .cost {
        font-size: 32px;
        color: #fecb01;
        font-weight: bold;
    }
    .price {
        font-size: 24px;
        color: #ff0f37;
    }
    .chat {
        font-size: 24px;
        color: #64c56b;
    }
</style>
